<template>
  <div>
    <el-card>
      <el-table
          :data="tableData"
          style="width: 100%"
          border
          header-cell-class-name="custom-header"
      >
        <el-table-column prop="seckill_activity_id" label="秒杀活动编号" align="center" />
        <el-table-column prop="seckill_decimal_device_id" label="秒杀医疗设备编号" align="center" />
        <el-table-column prop="original_price" label="原价" align="center" />
        <el-table-column prop="seckill_price" label="秒杀价" align="center" />
        <el-table-column prop="stock" label="秒杀库存" align="center" />
        <el-table-column prop="discount_type" label="优惠方式" align="center">
          <template #default="scope">
            {{ filterDict(scope.row.discount_type, discount_type_mapOptions) || scope.row.discount_type }}
          </template>
        </el-table-column>
        <el-table-column prop="discount_value" label="折扣/特价值" align="center" />
        <el-table-column prop="deckill_device_status" label="状态" align="center">
          <template #default="scope">
            {{ filterDict(scope.row.deckill_device_status, seckill_activity_status_mapOptions) || scope.row.deckill_device_status }}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" fixed="right" width="120">
          <template #default="scope">
            <el-button
                type="danger"
                size="small"
                style="font-weight:bold;letter-spacing:2px;"
                @click="handleSeckill(scope.row)"
            >
              秒 杀
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getAllFromRedis,seckillCreateOrder } from '@/api/system/seckill_activity_device'
import { getDictFunc, filterDict } from '@/utils/format'
import {ElMessage, ElMessageBox} from 'element-plus'

const seckill_activity_status_mapOptions = ref([])
const discount_type_mapOptions = ref([])
const tableData = ref([])

const getTableData = async () => {
  const res = await getAllFromRedis()
  if (res.code === 0) {
    tableData.value = res.data
  }
}

const setOptions = async () => {
  seckill_activity_status_mapOptions.value = await getDictFunc('seckill_activity_status_map')
  discount_type_mapOptions.value = await getDictFunc('discount_type_map')
}

const handleSeckill = async (row) => {
  try {
    await ElMessageBox.confirm(
        `确定要参与活动${row.seckill_activity_id}的设备${row.seckill_decimal_device_id}秒杀吗？`,
        '秒杀确认',
        { type: 'warning' }
    )
    const res = await seckillCreateOrder({
      activity_device_id: row.ID || row.id, // 这里根据你的表主键字段名调整
      address: '收货地址示例', // 这里可以弹窗让用户输入，或用默认
      pay_type: '在线支付'    // 这里可以弹窗选择，或用默认
    })
    if (res.code === 0) {
      ElMessage.success('下单成功！')
      getTableData() // 刷新库存
    } else {
      ElMessage.error(res.msg || '下单失败')
    }
  } catch (e) {
    // 用户取消弹窗不提示
  }
}

onMounted(() => {
  setOptions()
  getTableData()
})
</script>

<style scoped>
.custom-header {
  background: #f5f7fa;
  color: #333;
  font-weight: bold;
  font-size: 15px;
}
.el-table .el-button--danger {
  background: linear-gradient(90deg, #ff5858 0%, #f09819 100%);
  color: #fff;
  border: none;
  border-radius: 20px;
  padding: 6px 20px;
  transition: box-shadow 0.2s;
}
.el-table .el-button--danger:hover {
  box-shadow: 0 2px 12px 0 rgba(255, 88, 88, 0.2);
  opacity: 0.9;
}
</style>
